<%@ page pageEncoding="UTF-8"%>
<%@ include file="../commons/head.jsp"%>
<title>后台用户设置</title>
<style type="text/css">
</style>
<script type="text/javascript">
	var isValid;
	var userRole;
	var data;
	var flag = true;
	var reloadFlag;
	init();
	$.extend($.fn.validatebox.defaults.rules, {
		//密码验证输入
	    pass: {
	        validator: function (value,param) {
	        	if(!/[a-zA-Z0-9]+/.test(value)){
	        		$.fn.validatebox.defaults.rules.pass.message= "只能输入字母和数字";
	        		return false;
	        	} else { 
	        		if(value.length < param[0] || value.length > param[1]){
	        			$.fn.validatebox.defaults.rules.pass.message= '密码长度必须在' + param[0] + '至' + param[1] + '范围'
	        			return false;
	        		}else{
	            		return true;
	        		}
	        	}
	        	
	        },
	    },
		//手机号验证输入
	    phone: {
	        validator: function (value,param) {
	        	if(!/1[0-9]{10}/.test(value)){
	        		$.fn.validatebox.defaults.rules.phone.message= "请输入正确的手机号码"
	        		return false;
	        	} else { 
	        		if(value.length < param[0] || value.length > param[1]){
	        			$.fn.validatebox.defaults.rules.phone.message= '手机号码为' + param[0] + '位纯数字'
	        			return false;
	        		}else{
	            		return true;
	        		}
	        	}
	        	
	        },
	    },
	   
	  //用户ID验证输入
	    acc: {
	        validator: function (value,param) {
	        	var r = $("#userRole").combobox("getValue");
    			if(r == 1) {
 	    	    	if(value.length == 5) {
 	    	    		if(!/[a-zA-Z0-9]/.test(value)) {
 	    	    			$.fn.validatebox.defaults.rules.acc.message= "只能输入字母和数字";
 	    	        		return false;
 	    	        	}
 	    	    	} else {
 	    	    		$.fn.validatebox.defaults.rules.acc.message = "角色为开单中心的账户只能输入五位";
 	    	    		return false;
 	    	    	}
 	        	} else {
 	        		if(value.length < 1 || value.length > 20) {
 	        			$.fn.validatebox.defaults.rules.acc.message = '用户账户长度必须在1至20范围';
 	        			return false;
 	        		} else {
 	            		return true;
 	        		}
 	        	}
    			return true;
	        },
	    },
	    
	});

	$(function(){
		
		
		$('#isValid').combobox({onLoadSuccess:function(){
			var data = $('#isValid').combobox('getData');
			if(data){
	 			$("#isValid").combobox('select',data[0].id);
			}
		}
		});
		$("#search").click(function(){
			var params = {
				userName:$("#user_name").val(),
				userAccount:$("#user_account").val(),
				isValid:$("#isValid").combobox("getValue"),
			};
			$("#tt").datagrid('load', params);
		});
		
		$("#add").click(function(){
			reloadFlag = true;
			$("#fm").form('clear');
			$("#dlg").dialog("open");
			$("#userRole").combobox("enable");
			$("#userAccount").textbox("enable");
			$(".panel-title").text('新增');
			$("#isValid1").combobox("setValue",1);
			$("#userRole").combobox('select',4);
			$("#password").textbox("enableValidation");
		});
		//编辑用户信息
		$("#edit").click(function(){
			var row = $('#tt').datagrid('getSelected');
			if(!row){
				$.messager.alert("请选择一行","请选择一行","error");
				return ;
			}
			
			var id = row.id;
			var role = row.userRole;
			reloadFlag = false;
			$("#fm").form('load','${ctx}/systemusersetting/edit?id='+id);
			$("#dlg").dialog("open");
			$(".panel-title").text('编辑');
 			$("#password").textbox("disableValidation");
			if(role==1){
				$("#userAccount").textbox("disable");//且不可以更改
				$("#userRole").combobox("disable");//且不可以更改
			}else if(role==4){
				$("#userAccount").textbox("enable");
				$("#userRole").combobox("disable");
			}else{
				$("#userAccount").textbox("enable");
				$("#userRole").combobox("enable");
			}
		});	

		
		$('#fm').form({
	    	url:'${ctx}/systemusersetting/save',
	    	onSubmit: function(){
	    		var id = $("#id").val();
	    		if( id != null && id != ""){
	    		} else {
	    			return $(this).form('validate');
	    		}
	   		},
	    	success:function(data){
		    	data = eval("("+data+")");
				if(data.result==1){
						$.messager.alert("成功","成功","info",reload);
				}else{
					$.messager.alert("失败：",data.msg,"error");
				}
	    	}
		});
		init();
		
		
		$("#delete").click(function(){
			var row = $('#tt').datagrid('getSelected');
			if(!row){
				$.messager.alert("请选择一行","请选择一行","error");
				return ;
			}
			var id = row.id;
			$.messager.confirm("你确定要删除吗","你确定要删除吗",function(r){
			if(r){
			

			$.ajax({
				url:'${ctx}/systemusersetting/delete',
				contentType: "application/json; charset=utf-8",
				method:'delete',
				data:JSON.stringify(row),
				dataType:'json',
				success:function(data){
					if(data.result==1){
						$.messager.alert("成功","成功","info",reload);
					}else{
						$.messager.alert("失败",data.msg,"error");
					}
				}
			});
			}
			});

	 
		});
	});

	
	function init(){
		$.ajax({
			url:'${ctx}/enum?enumName=IsValid',			
			cache:true,
			async:false,
			success:function(data){
				isValid = data;
			}
		});
		
		$.ajax({
			url:'${ctx}/enum?enumName=RoleType',			
			cache:true,
			async:false,
			success:function(data){
				userRole = data;
			}
		});
	};

	function saved(){
		$('#fm').submit();
	};

	function reload(closeFlag){
		if(reloadFlag){
			$("#fm").form('clear');
		}
		if(closeFlag){
			$("#dlg").dialog('close');
		}
	$("#tt").datagrid('reload');
	}

	function closeDlg(){
		$("#tt").datagrid('reload');
		$('#dlg').dialog('close');
	};

	function getIsValid(value,row,index){
		for(var g in isValid){
			if(isValid[g].id==value){
				return isValid[g].name;
			}
		}
		return value;
	}
	
	function getUserRole(value,row,index){
		for(var u in userRole){
			if(userRole[u].id==value){
				return userRole[u].name;
			}
		}
		
		return value;
	}
	
	function rowStyle(index,row){
		if (index%2==0){     
	        return 'background-color:lightcyan;';     
	    }     
	}
	//鼠标悬停显示提示
	function showTips(value, row, index) {
		var content = '';
		if(value != null && value != ''){
		    content = '<span title="' + value + '" class="note" >' + value + '</span>';
		}
	    return content;
	}
	function showUserRoleTips(value, row, index) {
		var u = getUserRole(value,row,index);
	    return showTips(u);
	}
	function showValidFlagTips(value, row, index) {
		var i = getIsValid(value,row,index);
	    return showTips(i);
	}
</script>
</head>
<body>
<div class="jianju">
<h3>后台用户设置</h3>
<div id="tb" style="height:auto">
<div>
	<a id="add" href="#" class="easyui-linkbutton button" iconCls="icon-add" plain="false">新增</a>
	<a id="edit" href="#" class="easyui-linkbutton button" iconCls="icon-edit" plain="false">编辑</a>
	<a id="delete" href="#" class="easyui-linkbutton button" iconCls="icon-remove" plain="false">删除</a>
</div>
<hr>
<div>
	<label style="margin-left:15px;">用户名：</label><input id="user_name" class="easyui-textbox" style="width:100px">
	<label style="margin-left:15px;">用户账号：</label><input id="user_account" class="easyui-textbox" style="width:100px">
	<label style="margin-left:15px;">是否有效：</label>
		<select id="isValid"  class="easyui-combobox" style="width:100px" mode="remote"
				url="${ctx}/enum?enumName=IsValid&all=true"
				valueField="id" textField="name" method="get" editable="false"
				panelHeight="auto">
		</select>
	<a id="search" href="#" class="easyui-linkbutton button" style="margin-left:15px;" iconCls="icon-search">查询</a>	
</div>
</div>

	<table id="tt" class="easyui-datagrid" 
		url="${ctx}/systemusersetting/list"
		title="" style="width:98%;minWidth:1000px;"  iconCls="icon-save"
		rownumbers="true" pagination="true"
		pageList="[10,20,30,40]" method="get"
		toolbar="#tb" singleSelect="true"
		fitColumns="true" idField="id" rowStyler="rowStyle"
		onLoadSuccess:function(data){
                $(".note").tooltip({
                    onShow: function(){
                        $(this).tooltip('tip').css({ 
                            width:'300',
                            boxShadow: '1px 1px 3px #292929'       
                                             
                        });
                    }
                });
             } >
		<thead>
			<tr>
				<th data-options="field:'userName',formatter:showTips"  style="width:20% ">用户名</th>
				<th data-options="field:'userAccount',formatter:showTips" style="width:21% ">用户账号</th>
				<th data-options="field:'userRole',formatter:getUserRole,align:'center',formatter:showUserRoleTips" style="width:21% ">角色</th>
				<th data-options="field:'cellphone',align:'center',formatter:showTips" style="width:21% ">手机号码</th>
				<th data-options="field:'validFlag',align:'center',formatter:getIsValid,formatter:showValidFlagTips"  style="width:15% ">是否有效</th>
			</tr>
		</thead>
	</table>
</div>

	<div id="dlg" class="easyui-dialog" style="width:500px;padding:10px 20px"
		closed="true" buttons="#dlg-buttons" modal="true">
		<div class="ftitle"></div>
		<form id="fm" method="post" class="form-horizontal" role="form">
			<input type="hidden" id = "id" name="id">
			<div class="fitem form-group">
				<label class="col-sm-3 control-label">用户名：</label>
				<div class="col-sm-4">
					<input name="userName" class="easyui-validatebox easyui-textbox" style="width:200px" required validType="length[1,10]">
				</div>
			</div>
			<div class="fitem form-group">
				<label class="col-sm-3 control-label">用户账户：</label>
				<div class="col-sm-4">
					<input name="userAccount" id="userAccount" class="easyui-validatebox easyui-textbox" style="width:200px" required validType="acc[5,5]">
				</div>
			</div>
			
			<div class="fitem form-group">
				<label class="col-sm-3 control-label">角色：</label>
				<div class="col-sm-4">
					<select id="userRole" name="userRole" class="easyui-combobox" style="width:200px" mode="remote" 
						url="${ctx}/enum?enumName=RoleType"
						valueField="id" textField="name" method="get" editable="false"
						panelHeight="auto" validType="role">
					</select>
				</div>
			</div>
			
			<div class="fitem form-group"> 	
				<label class="col-sm-3 control-label">密码：</label>
				<div class="col-sm-4">
						<input name="password" id="password" type="text" required="false" class="easyui-validatebox easyui-textbox"  style="width:200px" validType="pass[8,20]"/>
				</div>
			</div>
			
			<div class="fitem form-group">
				<label class="col-sm-3 control-label">手机号码：</label>
				<div class="col-sm-4">
					<input name="cellphone" type="text" class="easyui-validatebox easyui-textbox" style="width:200px" required validType="phone[11,11]"/>
				</div>
			</div>
			
			<div class="fitem form-group">
				<label class="col-sm-3 control-label">是否有效：</label>
				<div class="col-sm-4">
					<select id="isValid1" name="validFlag" class="easyui-combobox" style="width:200px" mode="remote"
						url="${ctx}/enum?enumName=IsValid" name="isValid1"
						valueField="id" textField="name" method="get" editable="false"
						panelHeight="auto">
					</select> 
				</div>
			</div>

		</form>
	</div>
	
	<div id="dlg-buttons">
		<a href="#" class="easyui-linkbutton" iconCls="icon-ok" onclick="javascript:saved()">保存</a>
		<a href="#" class="easyui-linkbutton" iconCls="icon-cancel" onclick="javascript:reload(true);">取消</a>
	</div>


</body>
</html>